<template>
	<el-form-item>
		<template #label>
      <span>{{ $t('designer.setting.fileTypes') }}
        <el-tooltip effect="light" :content="$t('designer.setting.fileTypesHelp')">
         <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-info-filled style="height: 1.1em;width: 1.1em"/>
					</el-icon>
		</el-tooltip>
      </span>
		</template>
		<el-select multiple allow-create filterable default-first-option
				   v-model="thisOptionModel.fileTypes" style="width: 100%">
			<el-option v-for="(ft, ftIdx) in uploadPictureTypes"
					   :key="ftIdx"
					   :label="ft.label"
					   :value="ft.value">
			</el-option>
		</el-select>
	</el-form-item>
</template>

<script>

export default {
	name: "picture-upload-fileTypes-editor",
	mixins: [],
	props: {
		designer: Object,
		selectedWidget: Object,
		optionModel: Object,
	},
	data() {
		return {
			thisOptionModel: this.optionModel,
			thisSelectedWidget: this.selectedWidget,
			uploadPictureTypes: [
				{value: 'jpg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
				{value: 'jpeg', label: 'jpeg'},
				{value: 'png', label: 'png'},
				{value: 'gif', label: 'gif'},
			],
		}
	},
	watch: {
		'optionModel': {
			handler(val) {
				if (val) {
					this.thisOptionModel = val
				}
			}
		}
	},
}
</script>

<style scoped>

</style>
